<template>
    <div class="center">
        <div class="center-form">
          <el-form inline label-width="120px" @submit.native.prevent>
            <el-form-item label="商户名称">
              <el-input v-model="listParsem.merchantName" placeholder="请输入商户名称" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="门店名称">
              <el-input v-model="listParsem.shopName" placeholder="请输入门店名称" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label=" ">
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="initGetList"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" type="primary" @click="resetList"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="center-construct">
            <el-button type="primary" style="margin-right: 30px;" @click="addMerchantdialogClick">新增商户</el-button>
        </div>
        <div class="center-table">
            <el-table
          :data="tableList"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          :header-cell-style="tableHeaderColor"
        >
        <el-table-column
            prop="bindingAlipayLogonId"
            label="签约账户"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="商户名称"
            align="center"
          >
          </el-table-column>
          <!-- <el-table-column
            prop="shopName"
            label="门店名称"
            width="150"
            align="center"
          ></el-table-column> -->
          <el-table-column
            prop="merchantAppId"
            label="小程序appid"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="merchantAppName"
            label="小程序名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="contactName"
            label="联系人名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="contactPhone"
            label="联系人手机号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="contactCardNo"
            label="联系人身份证"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
          />
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
                <el-button
                type="text"
                @click="deleteMerchant(scope.row)"
                >编辑</el-button
                >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="sizechange"
          :page-size="listParsem.size"
          :current-page.sync="listParsem.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
   </div>
   <el-dialog
         :title="merchantForm.id? '新增商户' :'编辑商户'"
         :visible.sync="merchantVisible"
         width="600px"
         :before-close="handleClose">
         <div>
            <el-form :model="merchantForm"  :rules="merchantFormRules" ref="ruleForm" label-width="120px">
                <el-form-item label="签约账户" prop="bindingAlipayLogonId">
                   <el-input v-model="merchantForm.bindingAlipayLogonId" placeholder="请输入签约账户"></el-input>
               </el-form-item>
               <el-form-item label="绑定商户" prop="name">
                  <el-autocomplete @select="merchantIdSelect" style="width: 440px;" v-model.trim="merchantForm.name" :fetch-suggestions="merchantslist" :debounce="300" placeholder="请输入商户名称进行查询" ></el-autocomplete>
               </el-form-item>
               <el-form-item label="小程序appid" prop="merchantAppId">
                   <el-input v-model="merchantForm.merchantAppId" placeholder="请输入小程序appid"></el-input>
               </el-form-item>
               <el-form-item label="小程序名称" prop="merchantAppName">
                   <el-input v-model="merchantForm.merchantAppName" placeholder="请输入小程序名称"></el-input>
               </el-form-item>
               <el-form-item label="联系人名称" prop="contactName">
                   <el-input v-model="merchantForm.contactName" placeholder="请输入联系人名称"></el-input>
               </el-form-item>
               <el-form-item label="联系人手机号" prop="contactPhone">
                   <el-input v-model="merchantForm.contactPhone" placeholder="请输入联系人手机号"></el-input>
               </el-form-item>
               <el-form-item label="联系人身份证" prop="contactCardNo">
                   <el-input v-model="merchantForm.contactCardNo" placeholder="请输入联系人身份证"></el-input>
               </el-form-item>
            </el-form>
         </div>
         <span slot="footer" class="dialog-footer">
           <el-button @click="handleClose">取 消</el-button>
           <el-button type="primary" @click="addMerchantClick">确 定</el-button>
         </span>
       </el-dialog>
</div>
</template>
<script>
import { merchantPage , merchantEdit , merchantAdd } from '@/api/fetchApi'
import { merchantlist } from '@/api/api'
export default{
    data(){
        return{
            listParsem:{ page:1,size:10 },
            total:0,
            uploadUrl: process.env.VUE_APP_BASE_URL + "/product/v31/api/merchant/uploadfile/upload",
            token: { token: sessionStorage.getItem("token") },
            tableList:[],
            merchantList:[],
            storeList:[],
            bannerImageList:[],
            bannervideoUrl:'',
            bannerType:'',
            merchantForm:{},
            merchantFormRules:{
            bindingAlipayLogonId:[{ required: true, message: '请输入签约账户', trigger: 'blur' }],
            name:[{ required: true, message: '请选择商户', trigger: 'blur' }],
            merchantAppId:[{ required: true, message: '小程序appid', trigger: 'blur' }],
            merchantAppName:[{ required: true, message: '请输入小程序名称', trigger: 'blur' }],
            contactName:[{ required: true, message: '请输入联系人名称', trigger: 'blur' }],
            contactPhone:[{ required: true, message: '请输入联系人手机号', trigger: 'blur' }],
            contactCardNo:[{ required: true, message: '请输入联系人身份证', trigger: 'blur' }],
           },
           merchantVisible:false,
           videoLoading:false
        }
    },
    mounted(){
       this.initGetList()  
    },
    methods:{
       async initGetList(){
           const res =  await merchantPage(this.listParsem)
           this.tableList = res.data
           this.total = res.pageInfo.recordCount
        },
        addMerchantdialogClick(){
            this.merchantForm = {}
            this.$nextTick(()=>{
              this.$refs.ruleForm.clearValidate()
            })
          this.merchantVisible = true
        },
        // async initSimpleCreateQuery(){
        //    this.merchantList = []
        //    const res =  await simpleCreateQuery({page:1,size:999999})
        //    this.total = res.pageInfo.recordCount
        //    res.data.forEach(item=>{
        //      this.merchantList.push(item.cycleMerchantDO)
        //   })
        // },
        merchantChange(){
            this.initStoreList()
            this.merchantForm.cycleShopId = ''
        },
        deleteMerchant(v){
          this.merchantForm = v
          this.merchantVisible = true
          this.$forceUpdate()
        },
        // async initStoreList(){
        //   this.storeList = []
        //   const res = await shopQueryList({page:1,size:999999,merchantPid:this.merchantForm.merchantAppId})
        //   this.storeList = res.data
        // //   console.log(this.storeList)
        // },
       async addMerchantClick(){
        const valid = await  this.$refs.ruleForm.validate()
        if(valid){
            if(this.merchantForm.id){
             const res = await merchantEdit(this.merchantForm)
             if(res.code == '200'){
                this.merchantVisible = false
                this.$message.success(res.message)
                this.initGetList()  
             }else{
                this.merchantVisible = false
                this.$message.error(res.message)
             }
           }else{
             const res = await merchantAdd(this.merchantForm)
             if(res.code == '200'){
                this.merchantVisible = false
                this.$message.success(res.message)
                this.initGetList()  
             }else{
                this.merchantVisible = false
                this.$message.error(res.message)
             }
           }
         }
        },
        merchantslist(queryString, cb) {
         let sosolist = {};
         sosolist = {
             page: 1,
             size: 20,
             merchantName: this.merchantForm.name,
           }
         merchantlist(sosolist).then(res => {
           // console.log(res);
           if (res.code == 405) {
             sessionStorage.removeItem("token");
             this.$router.push("/login");
           } else {
              let merchantarrlist = []
             for(var i=0;i<res.data.length;i++){
              merchantarrlist.push({'value':res.data[i].merchantName + ' — ' + res.data[i].merchantNo,'id':res.data[i].id})
             }
              let results = queryString
               ? merchantarrlist.filter(this.createFilter(queryString))
               : merchantarrlist
             // 调用 callback 返回建议列表的数据
             cb(results)
           }
         })
         },
         createFilter(queryString) {
           return restaurant => {
           return (
           restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
           )
          }
        },
        merchantIdSelect(item) {
          this.merchantForm.merchantId = item.id
          this.merchantForm.name = item.value
         },
        beforeVideoUpload(){
           this.videoLoading = true
        },
        bannerUpLoadRemove(file, fileList){
          this.bannerImageList = fileList
        },
        resetList(){
          this.listParsem = {page:1,size:10}
          this.initGetList()
        },
        handleCurrentChange(val) {
          this.listParsem.page = val;
          this.initGetList()
        },
        sizechange(val) {
          this.listParsem.size = val;
          this.initGetList()
        },
        handleClose(){
            // this.bannerImageList = []
            this.merchantVisible = false
        },
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
          if (rowIndex === 0) {
            return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
          }
       }
    }
}
</script>
<style scoped>
.center{
    width: 100%;
    height: calc(100% - 30px);
    background-color: #fff;
    padding-top: 30px;
}
.center-form{
  padding: 0 22px;
}
.center-construct{
    width: 100%;
    display: flex;
    justify-content: end;
    margin-bottom: 30px;
}
.avatar{
  width: 160px;
  height: 160px;
}
::v-deep .el-upload--text{
    width: 160px;
    height: 160px;
    line-height: 160px;
}

.center-table{
    margin-top: 30px;
    padding: 0 20px;
}
::v-deep .el-loading-mask{
 width: 160px !important;
 height: 160px !important;
}
</style>